<template>
  <div style="display: flex">
    <el-select
      v-model="model.powerId"
      filterable
      placeholder="请选择供电单位，单选"
      clearable
      @change="changePower"
    >
      <el-option
        v-for="item in props.powerSupplyIdList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="model.lineId"
      filterable
      placeholder="请选择供电线路，单选"
      clearable
      @change="changLine"
    >
      <el-option
        v-for="item in lineIdList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="model.areaId"
      filterable
      placeholder="请选择台区，单选"
      clearable
      @change="changArea"
    >
      <el-option
        v-for="item in areaList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import { lineService } from "@/api/line";
import { basicConfigService } from "@/api/basicConfig";
const props = defineProps({
  form: {
    type: Object,
  },
  item: {
    type: Object,
  },
  width: {
    type: String,
    default: "120px",
  },
  powerSupplyIdList: {
    type: Object,
  },
});
const emit = defineEmits(["change"]);
const model = ref({ ...props.item });
const lineIdList = ref([]);
watch(
  () => props.item,
  (val) => {
    model.value = { ...val };
  }
);
const getLineList = () => {
  basicConfigService
    .getByAreaQueryDto({ data: { powerId: model.value.powerId } })
    .then((res) => {
      lineIdList.value = res.data.map((n) => {
        return {
          label: n.lineName,
          value: n.lineId,
          id: n.id,
        };
      });
    });
};
const changePower = () => {
  if (model.value.powerId) {
    model.value.lineId = "";
    model.value.areaId = "";
    emit("change", model.value);
    getLineList();
  }
};
const changLine = () => {
  if (model.value.lineId) {
    model.value.areaId = "";
    getAreaList();
    emit("change", model.value);
  }
};
const changArea = () => {
  if (model.value.areaId) {
    model.value.id = areaList.value.find(
      (n) => n.value == model.value.areaId
    )?.id;
  }
  emit("change", model.value);
};

const handleChange = (e, i) => {
  emit("change", model.value);
};
const areaList = ref([]);
const getAreaList = () => {
  basicConfigService
    .getByAreaQueryDto({
      data: { powerId: model.value.powerId, lineId: model.value.lineId },
    })
    .then((res) => {
      areaList.value = res.data.map((e) => {
        return {
          label: e.areaName,
          value: e.areaId,
          id: e.id,
        };
      });
    });
};
onMounted(() => {
  if (props.item.lineId) {
    getLineList();
  }
  if (props.item.areaId) {
    getAreaList();
  }
});
</script>

<style lang="less" scoped></style>
